<template>
  <view class="top">
    <!-- 标题轮播图等 -->
    <view class="headBg">
      <view class="title">
        <swiper indicator-dots='true' autoplay='true' interval='3000' duration='1000' circular='true' class="swip">
          <block v-for="(item, index) in movies" :key="index">
            <swiper-item>
              <image :src="item.url" mode='widthFix'></image>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search">
      <view class="img">
        <image src="../../static/images/index-icon/search.png" @click="search"></image>
      </view>
      <view class="input">
        <input type="text" placeholder="搜索" @input="searchText" />
      </view>
    </view>

    <!-- 发布和寻找 -->
    <view class="function">
      <!--失物招领-->
      <view class="release">
        <view class="list">
          <view class="img" @click="navigator(0)">
            <image src="../../static/images/index-icon/release.png"></image>
          </view>
          <navigator url="../release/release?releaseType=Lost">
            <view class="button">
              +发布
            </view>
          </navigator>
          <!-- <view class="button" @click="release("Lost")" data-type="Lost"> -->
        </view>
        <view class="font">
          失物招领
        </view>
      </view>

      <!--寻物启事-->
      <view class="release">
        <view class="list">
          <view class="img" @click="navigator(1)">
            <image src="../../static/images/index-icon/search.png"></image>
          </view>
          <navigator url="../release/release?releaseType=Found">
            <view class="button">
              +发布
            </view>
          </navigator>
        </view>
        <view class="font">
          寻物启事
        </view>
      </view>
    </view>

    <view class="ts" :style="{fontSize: '24rpx', color: 'rgb(175, 175, 175)', marginLeft: '55rpx', marginTop: '30rpx'}">
      tps:听说点击小飞机和放大镜，会进入神秘世界……
    </view>

    <!-- 公告 -->
    <view class="announcement-title">
      <view class="img">
        <image src="../../static/images/index-icon/announcement.png"></image>
      </view>
      <view class="font">最新公告</view>
    </view>

    <!-- 公告内容 -->
    <view class="announcement-center">
      <view v-for="(item, index) in arr" :key="index">
        <view class="list">
          <view class="li"></view>
          <view class="font">{{item}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        arr: ["test0", "test1", "test2"],
        searchTextStr: '',
        movies: [{
            url: '../../static/images/Rotating/1.png',
          },
          {
            url: '../../static/images/Rotating/3.jpeg'
          },
          {
            url: '../../static/images/Rotating/4.png'
          },
          {
            url: '../../static/images/Rotating/5.png'
          }
        ],
      }
    },
    methods: {
      // 跳转到搜索页面
      search(e) {
        uni.navigateTo({
          url: "../search/search?title=" + this.searchTextStr
        })
      },

      // 将搜索框内容赋值给变量
      searchText(e) {
        // console.log(e.detail.value);
        // console.log(e)
        this.searchTextStr = e.detail.value,
          console.log(this.searchTextStr)

      },
      // async onLoad() {
      //   var that = this;
      //   const db = wx.cloud.database({ // 链接数据表
      //     env: "cloud1-8gg39qwc79e5e108"
      //   });
      //   db.collection('announcement').where({}).get({
      //     success: function(res) {
      //       let all = []
      //       // res.data 包含该记录的数据
      //       for (let i = 0; i < 3; i++) {
      //         all.push(res.data[i])
      //       }
      //       that.setData({
      //         arr: all,
      //       })
      //     }
      //   })
      // },

      navigator(index) {
        uni.reLaunch({
          url: "../hall/hall?indexTitle=" + index
        })
      },

      release(e) {
        // console.log(e.currentTarget.dataset.type)
        if (uni.getStorageSync('userinfo') === '') {
          uni.showModal({
            title: '请先登录后在发布',
            content: '',
            complete: (res) => {
              if (res.cancel) {
                return
              }

              if (res.confirm) {
                uni.navigateTo({
                  url: '../user/user',
                })
              }
            }
          })

        } else {
          uni.navigateTo({
            url: '../release/release?releaseType=' + e,
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  /* 首行黄色背景+正式上线 */
  .top {
    display: flex;
    flex-direction: column;
  }

  .headBg {
    background-color: #ffd23c;
    height: 400rpx;
    border-bottom-right-radius: 80rpx;
    border-bottom-left-radius: 80rpx;
  }

  .headBg .content {
    background-color: #fff;
    width: 90%;
    height: 250rpx;
    margin: 50rpx auto;
    border-radius: 60rpx;
  }

  /* 轮播图Go */
  .title {
    width: 100%;
    height: 300rpx;
  }

  .title .swip {
    box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    height: 280rpx;
    width: 650rpx;
    margin-top: 10rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .title .swip image {
    width: 100%;
  }

  /* 轮播图Over */


  /* 搜索框 */
  .search {
    display: flex;
    width: 90%;
    background-color: #fff;
    height: 80rpx;
    margin: 0 auto;
    margin-top: -40rpx;
    border-radius: 60rpx;
  }

  .search .img {
    margin-top: 17rpx;
    margin-left: 27rpx;
  }

  .search .img image {
    width: 50rpx;
    height: 50rpx;
  }

  .search .input {
    margin-top: 20rpx;
    margin-left: 27rpx;
    color: #b6b6b6;
    font-size: 30rpx;
  }



  /* 发布和寻找 */
  .function {
    margin-top: 80rpx;
    display: flex;
    justify-content: space-evenly;
  }

  .function .release {
    width: 300rpx;
    height: 260rpx;
    background-color: #fff;
    border-radius: 30rpx;
  }

  .function .img image {
    width: 80rpx;
    height: 80rpx;
    margin: 30rpx;
  }

  .function .font {
    margin-left: 30rpx;
    margin-top: 20rpx;
  }

  .function .list {
    display: flex;
  }

  .function .list .button {
    background-color: #ffd23c;
    width: 140rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    border-radius: 30rpx;
    margin-top: 25rpx;
  }


  /* 公告 */
  .announcement-title {
    display: flex;
  }

  .announcement-title .font {
    margin-top: 66rpx;
    margin-left: 20rpx;
    font-size: 35rpx;
    font-weight: bold;
  }

  .announcement-title .img {
    margin-left: 70rpx;
    margin-top: 50rpx;
  }

  .announcement-title .img image {
    width: 80rpx;
    height: 80rpx;
  }

  .announcement-center {
    margin: 0 auto;
    width: 80%;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 50rpx;
  }

  .announcement-center .list {
    display: flex;
    margin: 30rpx;
  }

  .announcement-center .list .li {
    background-color: #ffd23c;
    border-radius: 50%;
    width: 30rpx;
    height: 30rpx;
    margin-top: 10rpx;
  }

  .announcement-center .list .font {
    margin-top: 5rpx;
    margin-left: 25rpx;
    width: 480rpx;
  }
</style>